<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title th:text="#{user.page.tile}">Title</title>
</head>
<body>
    <!--页面标椎化-->
    <div th:replace="common/common::html"></div>
    <!--查询框-->
    <div>
        <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.depName}"></label>
        <input type="text" id="depName"/>
        <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.registerDate}"></label>
        <input type="text" id="registerDate"/>
        <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.uuid}"></label>
        <input type="text" id="userUuid"/>
        <label sec:authorize="hasRole('ROLE_gqgy_data_user_query')" th:text="#{user.name}"></label>
        <input type="text" id="niceName"/>
        <a sec:authorize="hasRole('ROLE_gqgy_data_user_query')" class="btn" href="#" onclick="queryBtn();">
            <i class="glyphicon glyphicon-zoom-in"></i>
            <span th:text="#{common.query}"></span>
        </a>
        <a sec:authorize="hasRole('ROLE_gqgy_data_user_query')" class="btn" href="#" id="allocate-btn">
            <i class="glyphicon glyphicon-tower"></i>
            <span th:text="#{user.role.allocate}"></span>
        </a>
        <a href="#" class="btn" onclick="addUser();">
            <i class="fa fa-plus"></i>
            <span th:text="#{common.add}"> </span>
        </a>
    </div>

    <!--展示数据的桌面-->
    <table sec:authorize="hasRole('ROLE_gqgy_data_user_query')" id="flexigrid-id"></table>
    <!--用户详细信息-->
    <div  id="user-detail-dialog-id" style="display: none">
        <div>
            <span th:text="#{user.name}"></span>:
            <span id="detail-user-name-id"></span>
        </div>
        <div>
            <span th:text="#{user.nick}"></span>:
            <span id="detail-user-nick-id"></span>
        </div>
        <div>
            <span th:text="#{user.mobile}"></span>:
            <span id="detail-user-mobile-id"></span>
        </div>
        <div>
            <span th:text="#{user.email}"></span>:
            <span id="detail-user-email-id"></span>
        </div>
    </div>

    <div id="dialog-id"></div>
    <!--删除弹框-->
    <div>
        <div id="confirm-del-user" style="display: none">
            <span th:text="#{user.del.info}"></span>
        </div>
    </div>
    <!--分配角色弹框-->
    <div>
        <div id="allocate-user-dialog" style="display: none">
            <span th:text="#{user.role.allocate}"></span>
            <ul id="allocate-user-ztree" class="ztree">
            </ul>
        </div>
    </div>
    <!--添加用户弹框-->
    <div id="add-user-dialog" style="display: none">
        <form id="add-user" th:action="@{/user/insertUser}"
              method="post">
            <div class="form-group">
                <span for="add-user-name" th:text="#{user.name}"></span>
                <input name="userName" id="add-user-name" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="add-user-pass" th:text="#{user.password}"> </span>
                <input name="password" id="add-user-pass" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>

            <div class="form-group">
                <span for="add-user-nick" th:text="#{user.nick}"> </span>
                <input name="nickName" id="add-user-nick" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="add-user-mobile" th:text="#{user.mobile}"></span>
                <input name="mobile" id="add-user-mobile" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="add-user-email" th:text="#{user.email}"> </span>
                <input name="email" id="add-user-email" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>

        </form>
    </div>
    <!--更新用户-->
    <div id="update-user-dialog" style="display: none">
        <form id="update-user" th:action="@{/user/updateUser}"
              method="post">
            <div class="form-group">
                <span for="update-user-name" th:text="#{user.name}"></span>
                <input name="userName" id="update-user-name" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="update-user-pass" th:text="#{user.password}"> </span>
                <input name="password" id="update-user-pass" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>

            <div class="form-group">
                <span for="update-user-nick" th:text="#{user.nick}"> </span>
                <input name="nickName" id="update-user-nick" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="update-user-mobile" th:text="#{user.mobile}"></span>
                <input name="mobile" id="update-user-mobile" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
            <div class="form-group">
                <span for="update-user-email" th:text="#{user.email}"> </span>
                <input name="email" id="update-user-email" class="form-control" regex="^.{1,50}$"
                       tip="input 1 to 50 char">
            </div>
        </form>
    </div>
</body>
<script th:inline="javascript">

    // 添加用户
    function addUser() {
        $("#add-user").resetForm();
        $("#add-user-dialog").dialog('open');
    }
    // 准备函数
    $(function (){
        resizePageSize();
        var _columnWidth = _gridWidth/4;
        $("#flexigrid-id").flexigrid({
            width : _gridWidth,
            height : _gridHeight,
            url : /*[[@{/user/getUserInfolistByPage}]]*/"",
            dataType : 'json',
            colModel : [
                {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{user.del}]]*/"",name : 'userUuid',width : 150, sortable : true,align : 'center',process:function (v) {
                        var html='<a href="#" onclick="deleteUser(\''+ v+'\')"><i class="glyphicon glyphicon-minus" style="color: red"></i></a>';
                        return html
                    }},
                {display : /*[[#{user.update}]]*/"",name : 'userUuid',width : 150, sortable : true,align : 'center',process:function (v) {
                        var html='<a href="#" onclick="updateUser(\''+ v+'\')"><i class="glyphicon glyphicon-minus" style="color: blue"></i></a>';
                        return html
                    }},
            ],
            resizable : false, //resizable table是否可伸缩
            useRp : true,
            usepager : true, //是否分页
            autoload : false, //自动加载，即第一次发起ajax请求
            hideOnSubmit : true, //是否在回调时显示遮盖
            showcheckbox : true, //是否显示多选框
            rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
            rowbinddata : true
        });
        $("#flexigrid-id").flexReload();
        // 展示用户详细信息
        $("#user-detail-dialog-id").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{user.info}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });
        // 删除用户信息
        $("#confirm-del-user").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{user.del.title}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        var userUuid=$("#confirm-del-user").attr("userUuid");
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/user/deleteUserInfoById}]]*/'',
                            data: [{name: "userUuid", value: userUuid}],
                            success: function (data) {
                                message(data.msg);
                                $("#confirm-del-user").dialog( "close" );
                                queryBtn()
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                        resizePageSize();
                    }
                }
            ]
        });
        // 分配用户角色
        $("#allocate-btn").click(function (event) {
            event.stopPropagation();
            ztree();
        });
        $("#allocate-user-dialog").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{user.role.allocate}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        var userUUid=$("#allocate-user-ztree").attr("userUUid");
                        var roleIds = [];
                        var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                        var nodes = ztreeObj.getCheckedNodes(true);
                        $(nodes).each(function (index,item) {
                            roleIds.push(item.id);
                        });
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType : 'json',
                            url: /*[[@{/user/allocateRoleByUser}]]*/'',
                            data: [{name:"userUuid",value:userUUid},{name:"roleArray",value:roleIds}],
                            success: function (data) {
                                message(data.msg);
                                $("#allocate-user-dialog").dialog('close');
                            },
                            error: function(msg){
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });
        // 用户添加
        $("#add-user").ajaxForm({
            dataType: "json",
            success: function (data) {
                message(data.msg);
                $("#add-user-dialog").dialog('close');
            },
            error: function () {
                message(/*[[#{common.error}]]*/'');
            },
            complete: function (response, status) {

            }
        });
        $("#add-user-dialog").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{user.insert.title}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var user={
                            "userName":$("#add-user-name").val(),
                            "password":$("#add-user-pass").val(),
                            "niceName":$("#add-user-nick").val(),
                            "mobile":$("#add-user-mobile").val(),
                            "email":$("#add-user-email").val()
                        }
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType : 'json',
                            url: /*[[@{/user/insertUser}]]*/'',
                            data:user,
                            success: function (data) {
                                message(data.msg);
                                $("#add-user-dialog").dialog('close');
                            },
                            error: function(msg){
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
        // 更新用户
        $("#update-user").ajaxForm({
            dataType: "json",
            success: function (data) {
                message(data.msg);
                $("#update-user-dialog").dialog('close');
            },
            error: function () {
                message(/*[[#{common.error}]]*/'');
            },
            complete: function (response, status) {

            }
        });
        $("#update-user-dialog").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{user.update.title}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var user={
                            "userUuid":$("#update-user").attr("userUuid"),
                            "userName":$("#update-user-name").val(),
                            "password":$("#update-user-pass").val(),
                            "niceName":$("#update-user-nick").val(),
                            "mobile":$("#update-user-mobile").val(),
                            "email":$("#update-user-email").val()
                        }
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType : 'json',
                            url: /*[[@{/user/updateUser}]]*/'',
                            data:user,
                            success: function (data) {
                                message(data.msg);
                                $("#update-user-dialog").dialog('close');
                                queryBtn();
                            },
                            error: function(msg){
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
    });
    // 全局变量
    var allocateSetting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var _gridWidth;
    var _gridHeight;
    // 页面自适应
    function resizePageSize(){
        _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
        _gridHeight = $(document).height()-32-90; /* -32 顶部主菜单高度，   -90 查询条件高度*/
    }
    // 信息提示
    function message(contents) {
        $("#dialog-id").html(contents);
        $("#dialog-id").dialog('open');
    }
    // 条件查询
    function queryBtn() {
        var depName = $("#depName").val();
        var registerDate = $("#registerDate").val();
        var userUuid = $("#userUuid").val();
        var niceName = $("#niceName").val();
        $("#flexigrid-id").flexOptions({
            extParam:[
                {name:"depName",value:depName},
                {name:"registerDate",value:registerDate},
                {name:"userUuid",value:userUuid},
                {name:"niceName",value:niceName}
            ]
        }).flexReload();

    }
    // 删除用户的提示框
    function deleteUser(userUuid) {
        $("#confirm-del-user").attr("userUuid",userUuid);
        $("#confirm-del-user").dialog('open')
    }
    // 更新用户的提示框
    function updateUser(userUuid) {
        $("#update-user").attr("userUuid",userUuid);
        $("#update-user").resetForm();
        $("#update-user-dialog").dialog('open');
    }
    // 角色树
    function ztree() {
        var ids = $("#flexigrid-id").flexiData();
        if(ids.length !== 1){
            message(/*[[#{common.select.one}]]*/'');
            return;
        }
        $("#allocate-user-ztree").attr("userUUid",ids);

        $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/getRoleZtreeListByUserId}]]*/'',
                data: [{name:"userUuid",value:ids}],
                success: function (data) {
                    $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                    $("#allocate-user-dialog").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }
    // 用户信息详情
    function rowDbclick(r){
        $(r).dblclick(
            function() {
                var columnsArray = $(r).attr('ch').split("_FG$SP_");
                console.info(columnsArray);
                $("#detail-user-name-id").text(columnsArray[1]);
                $("#detail-user-nick-id").text(columnsArray[5]);
                $("#detail-user-mobile-id").text(columnsArray[4]);
                $("#detail-user-email-id").text(columnsArray[3]);
                $("#user-detail-dialog-id").dialog("open");
            });
    }
</script>
</html>
